<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="formInline.keyWord" placeholder="请输入" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="流程类型">
        <el-select v-model="formInline.wfTypeCode" placeholder="请选择" size="mini">
          <el-option label="所有" value=""></el-option>
          <el-option :label="v" :value="k" v-for="(v, k) in wfConfList.mapData && wfConfList.mapData.lclx" :key="k"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="wfConfList.list" border size="mini">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="date" label="流程类型">
        <template slot-scope="scope">
          {{ wfConfList.mapData.lclx[scope.row.bizType] }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="流程标题"></el-table-column>
      <el-table-column prop="note" label="流程描述"></el-table-column>
      <el-table-column prop="updatime" label="最后修改时间"></el-table-column>
      <el-table-column prop="updator" label="最后修改人"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editForm">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="wfConfList.currPage" :page-sizes="[10, 20, 30, 40]" :page-size="wfConfList.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="wfConfList.totalCount" class="data-pagination"></el-pagination>
    <ExamineDialog ref="examineDialog" :dialogVisible="dialogVisible" @setDialog="setDialog" :editableTabs="editableTabs" @setCheckData="setCheckData" :checkDataObj="checkDataObj" @removeCheckItem="removeCheckItem" @getChildrenDept="getChildrenDept" @handleCheckedChange="handleCheckedChange" @getChildrenGroup="getChildrenGroup" @tabClick="tabClick"></ExamineDialog>
    <el-drawer :visible.sync="drawer" :before-close="handleClose" size="60%" custom-class="data-drawer">
      <el-form ref="form" :model="form" label-position="top" label-width="80px">
        <el-form-item label="流程定义">
          <el-table :data="tableData" size="mini">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="des" label="节点描述">
              <template slot-scope="scope">
                <el-input v-model="scope.row.des" placeholder="请输入内容" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="person" label="审核人">
              <template slot-scope="scope">
                <el-input v-model="scope.row.person" placeholder="请输入内容" size="mini" @focus="setPerson($event, scope)"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="checkType" label="审核类型">
              <template slot-scope="scope">
                <el-select v-model="scope.row.checkType" placeholder="请选择" size="mini" style="width: 100%;">
                  <el-option v-for="(v, k) in wfConfList.mapData.checkType" :key="k" :label="v" :value="k"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="noticeType" label="通知">
              <template slot-scope="scope">
                <el-select v-model="scope.row.noticeType" placeholder="请选择" size="mini" style="width: 100%;">
                  <el-option v-for="(v, k) in wfConfList.mapData.noticeType" :key="k" :label="v" :value="k"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="backType" label="退回">
              <template slot-scope="scope">
                <el-select v-model="scope.row.backType" placeholder="请选择" size="mini" style="width: 100%;">
                  <el-option v-for="(v, k) in wfConfList.mapData.backType" :key="k" :label="v" :value="k"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="isEdit" label="编辑">
              <template slot-scope="scope">
                <el-select v-model="scope.row.isEdit" placeholder="请选择" size="mini" style="width: 100%;">
                  <el-option v-for="(v, k) in wfConfList.mapData.isEdit" :key="k" :label="v" :value="k"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="address">
              <template>
                <el-button size="mini">+</el-button>
                <el-button size="mini">-</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import ExamineDialog from '@/components/ExamineDialog'
import asmCrypto from 'asmcrypto.js'
export default {
  name: 'ProcessDefinition',
  components: { ExamineDialog },
  data () {
    return {
      drawer: false,
      formInline: {
        keyWord: '',
        wfTypeCode: ''
      },
      form: {},
      tableData: [
        {
          des: '待提交',
          person: '创建人',
          type: 0
        },
        {
          des: '指标管理组审核',
          person: '张三/部门/员工号（联想查询）',
          type: 0
        },
        {
          des: '部门经理审核',
          person: '张三、李四|部门+角色',
          type: 0
        },
        {
          des: '集团老总审核',
          person: '王五',
          type: 0
        }
      ],
      dialogVisible: false,
      editableTabs1: {
        user: {
          title: '人员',
          placeholder: '联想搜索（中文名/拼音/工号）',
          input: '',
          user: [],
          tableHeader: {
            employee: '员工中文名',
            userId: '员工工号',
            deptName: '员工部门'
          }
        },
        dept: {
          title: '部门',
          deptObj: {
            deptPath: [
              {
                id: 0,
                name: '全部',
                desc: ''
              }
            ],
            deptDetail: [
              {
                id: 1,
                name: '一级部门1',
                desc: '',
                isLeaf: false
              },
              {
                id: 2,
                name: '一级部门2',
                desc: '',
                isLeaf: false
              },
              {
                id: 3,
                name: '一级部门3',
                desc: '',
                isLeaf: false
              }
            ]
          }
        }
      },
      editableTabs: [{
        title: '人员',
        name: 'user',
        placeholder: '联想搜索（中文名/拼音/工号）',
        input: '',
        user: [
          {
            id: 0,
            name: '张一',
            desc: '',
            num: '000001',
            dept: '科技部'
          },
          {
            id: 1,
            name: '张二',
            desc: '',
            num: '000002',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          },
          {
            id: 2,
            name: '王五',
            desc: '',
            num: '000003',
            dept: '科技部'
          }
        ],
        tableHeader: {
          name: '员工中文名',
          num: '员工工号',
          dept: '员工部门'
        }
      }, {
        title: '部门',
        name: 'dept',
        placeholder: '',
        input: '',
        dept: [
          {
            id: 0,
            name: '科技部',
            desc: ''
          }
        ],
        tableHeader: {
          name: '部门名称'
        },
        deptObj: {
          deptPath: [
            {
              id: 0,
              name: '全部',
              desc: ''
            }
          ],
          deptDetail: [
            {
              id: 1,
              name: '一级部门1',
              desc: '',
              isLeaf: false
            },
            {
              id: 2,
              name: '一级部门2',
              desc: '',
              isLeaf: false
            },
            {
              id: 3,
              name: '一级部门3',
              desc: '',
              isLeaf: false
            }
          ]
        }
      }, {
        title: '角色',
        name: 'role',
        placeholder: '角色名',
        input: '',
        role: [
          {
            id: 0,
            name: '系统管理员',
            desc: ''
          },
          {
            id: 1,
            name: '科技一部管理员',
            desc: ''
          },
          {
            id: 2,
            name: '指标管理员',
            desc: ''
          }
        ],
        tableHeader: {
          name: '角色名称'
        }
      }, {
        title: '动态变量',
        name: 'other',
        placeholder: '',
        input: '',
        other: [
          {
            id: 0,
            name: '用户',
            desc: ''
          }
        ],
        tableHeader: {
          name: 'other'
        },
        checkboxList: [
          {
            id: 0,
            name: '部门',
            desc: ''
          },
          {
            id: 1,
            name: '角色',
            desc: ''
          },
          {
            id: 2,
            name: '用户',
            desc: ''
          }
        ]
      }],
      checkDataObj: {
        user: [],
        dept: [],
        role: [],
        other: []
      },
      wfConfList: {
        pageSize: 10,
        currPage: 1
      }
    }
  },
  created () {
    this.getWfConfList()
  },
  methods: {
    tabClick (tab) {
      if (tab.name === 'user') {
        
      } else if (tab.name === 'dept') {

      } else if (tab.name === 'role') {

      } else if (tab.name === 'other') {

      }
    },
    getUserList () {
      this.Api.getUserList({
        keyWord: ''
      }).then(res => {
        console.log(res)
      })
    },
    editForm () {
      this.drawer = true
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(res => {
        done()
      })
    },
    handleSizeChange (val) {
      this.wfConfList.pageSize = val
      this.getWfConfList()
    },
    handleCurrentChange (val) {
      this.wfConfList.currPage = val
      this.getWfConfList()
    },
    getWfConfList () {
      this.Api.getWfConfList({
        keyWord: this.formInline.keyWord,
        pageNum: this.wfConfList.currPage,
        pageSize: this.wfConfList.pageSize,
        wfTypeCode: this.formInline.wfTypeCode
      }).then(res => {
        this.wfConfList = res.data
      })
    },
    onSubmit() {
      this.wfConfList.currPage = 1
      this.getWfConfList()
      const plainData = 'Hello World'; // 待加密的数据
      // const key = '0123456789abcdef'; // 密钥（16个十六进制字符）
      const sm4 = new this.SM4Util()
      console.log(sm4.encryptDefault_CBC('我是一段测试aaaa'))
      console.log('我是一段测试aaaa')
      // const miStr1 = sm4.encryptCustom_ECB(plainData, key)
      // const miStr2 = sm4.decryptCustom_ECB(miStr1, key)
      // // console.log(miStr1)
      // // console.log(miStr2)
      // // const encryptedData = this.SM4Util.encrypt(plainData, key)
      // // console.log('加密后的数据：', encryptedData)
      // const sm2 = require('sm-crypto').sm2
      // const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
      // let keypair = sm2.generateKeyPairHex()

      // let publicKey = keypair.publicKey // 公钥
      // let privateKey = keypair.privateKey // 私钥
      // let encryptData = sm2.doEncrypt(plainData, '04db9629dd33ba568e9507add5df6587a0998361a03d3321948b448c653c2c1b7056434884ab6f3d1c529501f166a336e86f045cea10dffe58aa82ea13d725363', cipherMode) // 加密结果
      // let decryptData = sm2.doDecrypt(encryptData, privateKey, cipherMode) // 解密结果
      // console.log(encryptData)
      // console.log('encryptData')
      // console.log(decryptData)
      // const sm41 = require('sm-crypto').sm4
      // let a = sm41.encrypt(plainData, '12345678901111111234567890111111')
      // console.log(new sm41())
      // console.log(a)
      const sm2_main = require('sm-crypto').sm2
      let keypair = sm2_main.generateKeyPairHex('SM2')
      let publicKey = keypair.publicKey; //公匙
      let privateKey = keypair.privateKey; //私匙
      const cipherMode = 1
      //加密
      function doEncrypt (msg) {
        return sm2_main.doEncrypt(msg, publicKey, cipherMode)
      }

      //解密 encryptData是doEncrypt返回的值
      function doDecrypt (encryptData) {
        return sm2_main.doDecrypt(encryptData, privateKey, cipherMode)
      }
      let encrypt = doEncrypt("我是一段测试aaaa", publicKey, cipherMode)
      let decrypt = doDecrypt(encrypt)
      console.log(encrypt)
      console.log(decrypt)
    },
    setPerson (e, scope) {
      this.dialogVisible = true
      this.getUserList()
    },
    setDialog (type) {
      this.dialogVisible = false
      console.log(this.checkDataObj)
    },
    setCheckData () {
      if (this.$refs.examineDialog.editableTabsValue === 'user' || this.$refs.examineDialog.editableTabsValue === 'role') {
        for (let i = 0; i < this.$refs.examineDialog.$refs[`multipleTable${this.$refs.examineDialog.editableTabsValue}`][0].selection.length; i++) {
          switch (this.$refs.examineDialog.editableTabsValue) {
            case 'user':
              for (let j = 0; j < this.editableTabs[0][this.$refs.examineDialog.editableTabsValue].length; j++) {
                if (this.$refs.examineDialog.$refs[`multipleTable${this.$refs.examineDialog.editableTabsValue}`][0].selection[i].id === this.editableTabs[0][this.$refs.examineDialog.editableTabsValue][j].id) {
                  this.editableTabs[0][this.$refs.examineDialog.editableTabsValue].splice(j, 1)
                  j--
                  break
                }
              }
              break
            case 'role':
              for (let j = 0; j < this.editableTabs[2][this.$refs.examineDialog.editableTabsValue].length; j++) {
                if (this.$refs.examineDialog.$refs[`multipleTable${this.$refs.examineDialog.editableTabsValue}`][0].selection[i].id === this.editableTabs[2][this.$refs.examineDialog.editableTabsValue][j].id) {
                  this.editableTabs[2][this.$refs.examineDialog.editableTabsValue].splice(j, 1)
                  j--
                  break
                }
              }
              break
          }
          this.checkDataObj[this.$refs.examineDialog.editableTabsValue].unshift(this.$refs.examineDialog.$refs[`multipleTable${this.$refs.examineDialog.editableTabsValue}`][0].selection[i])
        }
      } else if (this.$refs.examineDialog.editableTabsValue === 'other') {
        for (let i = 0; i < this.$refs.examineDialog.checkList.length; i++) {
          for (let j = 0; j < this.editableTabs[3].checkboxList.length; j++) {
            if (this.$refs.examineDialog.checkList[i] === this.editableTabs[3].checkboxList[j].name) {
              this.checkDataObj[this.$refs.examineDialog.editableTabsValue].unshift(this.editableTabs[3].checkboxList[j])
              this.editableTabs[3].checkboxList.splice(j, 1)
              this.$refs.examineDialog.checkList.splice(i, 1)
              i--
              j--
              break
            }
          }
        }
      } else if (this.$refs.examineDialog.editableTabsValue === 'dept') {
        let temPath = JSON.parse(JSON.stringify(this.editableTabs[1].deptObj.deptPath))
        temPath.shift()
        let temArray = []
        for (let i = 0; i < this.$refs.examineDialog.deptCheckList.length; i++) {
          for (let j = 0; j < this.editableTabs[1].deptObj.deptDetail.length; j++) {
            if (this.$refs.examineDialog.deptCheckList[i] === this.editableTabs[1].deptObj.deptDetail[j].name) {
              temArray.push(this.editableTabs[1].deptObj.deptDetail[j])
              this.editableTabs[1].deptObj.deptDetail.splice(j, 1)
            }
          }
        }
        for (let i = 0; i < temArray.length; i++) {
          temArray[i].desc = `${temPath.map(v => v.name).join('/')}${temPath.length === 0 ? '' : '/'}${temArray[i].name}`
          this.checkDataObj[this.$refs.examineDialog.editableTabsValue].unshift(temArray[i])
        }
        this.$refs.examineDialog.deptCheckList = []
      }
    },
    removeCheckItem (type, index) {
      switch (type) {
        case 'user':
          this.editableTabs[0][type].unshift(this.checkDataObj[type][index])
          break
        case 'role':
          this.editableTabs[2][type].unshift(this.checkDataObj[type][index])
          break
        case 'other':
          this.editableTabs[3].checkboxList.unshift(this.checkDataObj[type][index])
          break
        case 'dept':
          if (this.checkDataObj[type][index].desc.split('/').length === 1 || (this.checkDataObj[type][index].desc.split('/')[this.checkDataObj[type][index].desc.split('/').length - 2] === this.editableTabs[1].deptObj.deptPath[this.editableTabs[1].deptObj.deptPath.length - 1].name)) this.editableTabs[1].deptObj.deptDetail.unshift(this.checkDataObj[type][index])
          break
      }
      this.checkDataObj[type].splice(index, 1)
    },
    getChildrenDept (v) {
      this.editableTabs[1].deptObj.deptPath.splice(this.editableTabs[1].deptObj.deptPath.findIndex(item => item.id === v.id) + 1)
      switch (v.id) {
        case 0:
          this.$refs.examineDialog.deptCheckList = []
          this.editableTabs[1].deptObj.deptDetail = [
            {
              id: 1,
              name: '一级部门1',
              desc: '',
              isLeaf: false
            },
            {
              id: 2,
              name: '一级部门2',
              desc: '',
              isLeaf: false
            },
            {
              id: 3,
              name: '一级部门3',
              desc: '',
              isLeaf: false
            }
          ]
          break
        case 1:
        case 2:
        case 3:
          this.$refs.examineDialog.deptCheckList = []
          this.editableTabs[1].deptObj.deptDetail = [
            {
              id: 4,
              name: '二级部门1',
              desc: '',
              isLeaf: false
            },
            {
              id: 5,
              name: '二级部门2',
              desc: '',
              isLeaf: false
            }
          ]
          break
      }
      // 把右侧已选中的部门从左侧过滤掉
      for (let i = 0; i < this.checkDataObj.dept.length; i++) {
        if (this.editableTabs[1].deptObj.deptDetail.findIndex(item => item.id === this.checkDataObj.dept[i].id) > -1) this.editableTabs[1].deptObj.deptDetail.splice(this.editableTabs[1].deptObj.deptDetail.findIndex(item => item.id === this.checkDataObj.dept[i].id), 1)
      }
    },
    handleCheckedChange (value) {
      return
      let temArray = []
      for (let i = 0; i < value.length; i++) {
        for (let j = 0; j < this.editableTabs[1].deptObj.deptDetail.length; j++) {
          if (value[i] === this.editableTabs[1].deptObj.deptDetail[j].name) {
            temArray.push(this.editableTabs[1].deptObj.deptDetail[j])
          }
        }
      }
      if (temArray.length > 0 && temArray[0].isLeaf) {

      } else if (temArray.length > 0) {
        this.editableTabs[1].deptObj.deptPath.push(temArray[0])
        switch (temArray[0].id) {
          case 1:
          case 2:
          case 3:
            this.editableTabs[1].deptObj.deptDetail = [
              {
                id: 4,
                name: '二级部门1',
                desc: '',
                isLeaf: false
              },
              {
                id: 5,
                name: '二级部门2',
                desc: '',
                isLeaf: false
              }
            ]
            break
          case 4:
          case 5:
            this.editableTabs[1].deptObj.deptDetail = [
              {
                id: 6,
                name: '三级部门1',
                desc: '',
                isLeaf: true
              },
              {
                id: 7,
                name: '三级部门2',
                desc: '',
                isLeaf: true
              },
              {
                id: 8,
                name: '三级部门3',
                desc: '',
                isLeaf: true
              },
              {
                id: 9,
                name: '三级部门4',
                desc: '',
                isLeaf: true
              },
              {
                id: 10,
                name: '三级部门5',
                desc: '',
                isLeaf: true
              },
              {
                id: 11,
                name: '三级部门6',
                desc: '',
                isLeaf: true
              },
              {
                id: 12,
                name: '三级部门7',
                desc: '',
                isLeaf: true
              }
            ]
            break
        }
      }
    },
    getChildrenGroup (v) {
      if (!v.isLeaf) {
        this.$refs.examineDialog.deptCheckList = []
        this.editableTabs[1].deptObj.deptPath.push(v)
      }
      switch (v.id) {
        case 1:
        case 2:
        case 3:
          this.editableTabs[1].deptObj.deptDetail = [
            {
              id: 4,
              name: '二级部门1',
              desc: '',
              isLeaf: false
            },
            {
              id: 5,
              name: '二级部门2',
              desc: '',
              isLeaf: false
            }
          ]
          break
        case 4:
        case 5:
          this.editableTabs[1].deptObj.deptDetail = [
            {
              id: 6,
              name: '三级部门1',
              desc: '',
              isLeaf: true
            },
            {
              id: 7,
              name: '三级部门2',
              desc: '',
              isLeaf: true
            },
            {
              id: 8,
              name: '三级部门3',
              desc: '',
              isLeaf: true
            },
            {
              id: 9,
              name: '三级部门4',
              desc: '',
              isLeaf: true
            },
            {
              id: 10,
              name: '三级部门5',
              desc: '',
              isLeaf: true
            },
            {
              id: 11,
              name: '三级部门6',
              desc: '',
              isLeaf: true
            },
            {
              id: 12,
              name: '三级部门7',
              desc: '',
              isLeaf: true
            }
          ]
          break
      }
      // 把右侧已选中的部门从左侧过滤掉
      for (let i = 0; i < this.checkDataObj.dept.length; i++) {
        if (this.editableTabs[1].deptObj.deptDetail.findIndex(item => item.id === this.checkDataObj.dept[i].id) > -1) this.editableTabs[1].deptObj.deptDetail.splice(this.editableTabs[1].deptObj.deptDetail.findIndex(item => item.id === this.checkDataObj.dept[i].id), 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.data-pagination {
  text-align: right;
  margin-top: 10px;
}
/deep/ .data-drawer {
  .el-drawer__body {
    padding: 0 20px;
  }
}
</style>
